import React from 'react'
import { View } from '@tarojs/components'
import classnames from 'classnames'
import Taro from '@tarojs/taro'

import './index.scss'
import { Icon } from '../Icon'

export interface INavbarProps {
    fixed?: boolean
    title?: string
    leftText?: string
    rightText?: string
    leftArrow?: boolean
    placeholder?: boolean
    border?: boolean
    zIndex?: number
    customStyle?: React.CSSProperties
    titleStyle?: React.CSSProperties
    safeArea: boolean
}



export const NavBar: React.FC<INavbarProps> = (props) => {

    const [heiget, setHeight] = React.useState<number>(44)

    React.useEffect(() => {
        if (props.safeArea) {
            Taro.getSystemInfo().then(sys => {
                setHeight(heiget + sys.statusBarHeight)
            })
        }
    }, [])

    if (props.fixed && props.placeholder) {
        return <View style={{ height: `${heiget}px` }}></View>
    }
    return (
        <View
            className={
                classnames('xxm-nav-bar', {
                    'xxm-nav-bar--fixed': props.fixed,
                    'xxm-hairline--bottom': props.border,

                })}
            style={{
                ...props.customStyle,
                height: `${heiget}px`,
                // lineHeight: `${heiget}px`,
                zIndex: props.zIndex || 100
            }}
        >
            <View className="xxm-nav-bar__content">
                <View className="xxm-nav-bar__left">
                    {
                        props.leftArrow &&
                        <Icon
                            size={16}
                            name="arrow-left" />
                    }
                    {
                        props.leftText &&
                        <View
                            className="xxm-nav-bar__text"
                            hoverClass="xxm-nav-bar__text--hover"
                            hoverStayTime={70}
                        >
                            {props.leftText}
                        </View>
                    }
                </View>
                <View
                    className="xxm-nav-bar__title xxm-ellipsis"
                    style={{ ...props.titleStyle }}
                >
                    {props.title}
                </View>
                <View className="xxm-nav-bar__right">
                    {
                        props.rightText &&
                        <View
                            className="xxm-nav-bar__text"
                            hoverClass="xxm-nav-bar__text--hover"
                            hoverStayTime={70}
                        >{props.rightText}</View>
                    }
                </View>
            </View>
        </View>
    )
}